/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
// 主色
$color-primary: #409EFF;

// 辅助色
$color-info: #909399;
$color-success: #67C23A;
$color-warning: #E6A23C;
$color-danger: #F56C6C;

// 文字
$color-text-main: #303133;
$color-text-normal: #606266;
$color-text-sub: #909399;
$color-text-placehoder: #C0C4CC;

// 边框
$color-border-1: #DCDFE6;
$color-border-2: #E4E7ED;
$color-border-3: #EBEEF5;
$color-border-4: #F2F6FC;

// 背景
$color-bg: #f8f8f9;


//文字颜色
.text_color_primary {
    color: $color-primary;
}

.text_color_success {
    color: $color-success;
}

.text_color_warning {
    color: $color-warning;
}

.text_color_info {
    color: $color-info;
}

.text_color_danger {
    color: $color-danger;
}

.text_color_main {
    color: color-text-main;
}

.text_color_content {
    color: $color-text-normal;
}

.text_color_tips {
    color: $color-text-sub;
}

.text_color_placehoder {
    color: $color-text-placehoder;
}

.text_color_white {
    color: #fff !important;
}

.text_color_red {
    color: #ff0000 !important;
}

.text_color_black {
    color: #000 !important;
}

.text_color_grey {
    color: grey !important;
}

.text_color_blue {
    color: blue !important;
}

.text_color_link {
    color: #009ceb !important;
}

//END 文字颜色

.blank_s {
    height: 8px;
}

.blank_m {
    height: 16px;
}

.blank_l {
    height: 26px;
}

.tc {
    text-align: center;
}

.tl {
    text-align: left;
}


@for $i from 1 through 200 {
    .h#{$i*10} {
        height: #{$i * 10}px !important;
    }
}

@for $i from 0 through 20 {
    .mb#{$i*5} {
        margin-bottom: #{$i * 5}px !important;
    }
}

@for $i from 0 through 20 {
    .mt#{$i*5} {
        margin-top: #{$i * 5}px !important;
    }
}

@for $i from 0 through 20 {
    .ml#{$i*5} {
        margin-left: #{$i * 5}px !important;
    }
}

@for $i from 0 through 20 {
    .mr#{$i*5} {
        margin-right: #{$i * 5}px !important;
    }
}

.m0 {
    margin: 0;
}

.ma0 {
    margin: 0 auto;
}


//循环
@for $i from 1 through 9 {
    .fwb#{$i*100} {
        font-weight: #{$i*100};
    }
}

@for $i from 0 through 10 {
    .opacity#{$i} {
        opacity: calc($i / 10);
    }
}

@for $i from 12 through 100 {
    .fs#{$i} {
        font-size: $i*1rpx !important;
    }
}

@for $i from 12 through 100 {
    .lh#{$i} {
        line-height: $i*1rpx !important;
    }
}

@for $i from 0 through 20 {
    .p#{$i*5} {
        padding: #{$i * 5}px !important;
    }
}

@for $i from 0 through 20 {
    .pl#{$i*5} {
        padding-left: #{$i * 5}px !important;
    }
}

@for $i from 0 through 20 {
    .pr#{$i*5} {
        padding-right: #{$i * 5}px !important;
    }
}

@for $i from 0 through 20 {
    .pb#{$i*5} {
        padding-bottom: #{$i * 5}px !important;
    }
}

@for $i from 0 through 20 {
    .pt#{$i*5} {
        padding-top: #{$i * 5}px !important;
    }
}

@for $i from 1 through 100 {
    .pct#{$i} {
        width: $i * 1%;
    }
}

@for $i from 1 through 10 {
    .nowrap#{$i} {
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 末尾加省略号 */
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        /* 行数，也可以设为1，用来做单行 */
        -webkit-line-clamp:#{$i}; //在第几行加省略号
    }
}

@for $i from 0 through 100 {
    .zindex#{$i*1} {
        z-index: #{$i*1} !important;
    }
}

@for $i from 0 through 80 {
    .border_radius_#{$i} {
        border-radius: #{$i}px;
    }
}

.nowrap {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    /*兼容opera*/
    text-overflow: ellipsis;
    /*这就是省略号喽*/
    overflow: hidden;
    /*设置超过的隐藏*/
    white-space: nowrap;
    /*设置不折行*/
}

.pos_r {
    position: relative;
}

.pos_a {
    position: absolute;
}

.pos_f {
    position: fixed;
}

.text_l {
    text-align: left !important;
}

.text_r {
    text-align: right !important;
}

.text_c {
    text-align: center !important;
}


.tr {
    text-align: right;
}

//边框
//全边框
.bds_1 {
    border: solid 1px $color-border-1 !important;
}

.bds_2 {
    border: solid 1px $color-border-2 !important;
}

.bds_3 {
    border: solid 1px $color-border-3 !important;
}

.bds_4 {
    border: solid 1px $color-border-4 !important;
}

.bdd_1 {
    border: dashed 1px $color-border-1 !important;
}

.bdd_2 {
    border: dashed 1px $color-border-2 !important;
}

.bdd_3 {
    border: dashed 1px $color-border-3 !important;
}

.bdd_4 {
    border: dashed 1px $color-border-4 !important;
}

//上边框
.bdd_t_1 {
    border-top: dashed 1px $color-border-1 !important;
}

.bdd_t_2 {
    border-top: dashed 1px $color-border-2 !important;
}

.bdd_t_3 {
    border-top: dashed 1px $color-border-3 !important;
}

.bdd_t_4 {
    border-top: dashed 1px $color-border-4 !important;
}

.bds_t_1 {
    border-top: solid 1px $color-border-1 !important;
}

.bds_t_2 {
    border-top: solid 1px $color-border-2 !important;
}

.bds_t_3 {
    border-top: solid 1px $color-border-3 !important;
}

.bds_t_4 {
    border-top: solid 1px $color-border-4 !important;
}

//左边框
.bdd_l_1 {
    border-left: dashed 1px $color-border-1 !important;
}

.bdd_l_2 {
    border-left: dashed 1px $color-border-2 !important;
}

.bdd_l_3 {
    border-left: dashed 1px $color-border-3 !important;
}

.bdd_l_4 {
    border-left: dashed 1px $color-border-4 !important;
}

.bds_l_1 {
    border-left: solid 1px $color-border-1 !important;
}

.bds_l_2 {
    border-left: solid 1px $color-border-2 !important;
}

.bds_l_3 {
    border-left: solid 1px $color-border-3 !important;
}

.bds_l_4 {
    border-left: solid 1px $color-border-4 !important;
}

//右边框
.bdd_r_1 {
    border-right: dashed 1px $color-border-1 !important;
}

.bdd_r_2 {
    border-right: dashed 1px $color-border-2 !important;
}

.bdd_r_3 {
    border-right: dashed 1px $color-border-3 !important;
}

.bdd_r_4 {
    border-right: dashed 1px $color-border-4 !important;
}

.bds_r_1 {
    border-right: solid 1px $color-border-1 !important;
}

.bds_r_2 {
    border-right: solid 1px $color-border-2 !important;
}

.bds_r_3 {
    border-right: solid 1px $color-border-3 !important;
}

.bds_r_4 {
    border-right: solid 1px $color-border-4 !important;
}

//下边框
.bds_b_1 {
    border-bottom: solid 1px $color-border-1 !important;
}

.bds_b_2 {
    border-bottom: solid 1px $color-border-2 !important;
}

.bds_b_3 {
    border-bottom: solid 1px $color-border-3 !important;
}

.bds_b_4 {
    border-bottom: solid 1px $color-border-4 !important;
}

.bdd_b_1 {
    border-bottom: dashed 1px $color-border-1 !important;
}

.bdd_b_2 {
    border-bottom: dashed 1px $color-border-2 !important;
}

.bdd_b_3 {
    border-bottom: dashed 1px $color-border-3 !important;
}

.bdd_b_4 {
    border-bottom: dashed 1px $color-border-4 !important;
}

.bdn {
    border: none !important;
}

.bdn_b {
    border-bottom: none !important;
}

.bdn_t {
    border-top: none !important;
}

.bdn_l {
    border-left: none !important;
}

//end 边框
.bg_white {
    background: #fff !important;
}

.bg_f5 {
    background: #f5f5f5 !important;
}

.bg_ff {
    background: #fff !important;
}

.bg_none {
    background: none !important;
}


.cursor_pointer {
    cursor: pointer;
}

.cursor_none {
    cursor: default !important;
}

//盒子
.dis_blk {
    display: block !important;
}

.dis_none {
    display: none !important;
}

.dis_inline {
    display: inline !important;
}

.dis_inb {
    display: inline-block !important;
}

.dis_flex {
    display: flex !important;
}

.dis_flex_align_center {
    display: flex;
    align-items: center;
}

.dis_flex_align_start {
    display: flex;
    align-items: flex-start;
}

.dis_flex_align_right_center {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dis_flex_align_between_center {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dis_flex_align_around_center {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.dis_flex_align_content_center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dis_flex_align_content_evenly {

    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.dis_flex_align_center_flex_w {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.clearfix {
    clear: both;
}

.clearfix:after {
    content: 'clearfix';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear {
    clear: both;
}

.fl {
    float: left !important;
}

.fwb {
    font-weight: bold;
}

.bgc_grey {
    background: #ccc;
}

.fr {
    float: right !important;
}


@for $i from 1 through 100 {
    .height#{$i*10} {
        height: #{$i * 10}px !important;
    }
}

@for $i from 0 through 90 {
    .width#{$i*10} {
        width: #{$i * 10}px !important;
    }
}